<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar 
		:fixed="true"
		:border="false"
		 status-bar 
		 left-icon="left"
		 right-icon="more-filled"
		@clickLeft="back"
		@clickRight="navTo('/pages/chat/chat-settings',friend.id)"
		>
			<view class="friend-name">
				<text class="name">{{friend.userName}} </text>
				<text class="school">{{school===null?'':school}}</text>
			</view>
		  </uni-nav-bar>
		
		<!-- 聊天内容主体 -->
		<view class="center">
			<scroll-view
				style="height: 530px;padding-bottom: 60px;"
				:scroll-top="scrollTop"
				scroll-y="true" 
				scroll-with-animation="true"
				> 
				<view style="{padding-bottom:100px;}">
					<view v-for="msg in msgList" :key="msg.id" >
							<!-- 好友消息 -->
						<view class="friend-msg" v-if="friendMessage(msg)">
							<view class="avatar">
								<u-avatar
									size="35"
									:text="getAvatar(friend)"
									shape="square"
									bg-color="#0080FF"
									font-size='10'
									:src="friend.avaUrl"
									>
								</u-avatar>
							</view >
							<view class="content">
								<text>{{msg.content}}</text>
							</view>
						</view>
						<!-- 自己消息 -->
						<view class="me-msg" v-if="meMessage(msg)">
							<view class="me-content">
								<text>{{msg.content}}</text>
							</view>
							<view class="me-avatar">
								<u-avatar
									size="35"
									:text="getAvatar(user)"
									shape="square"
									bg-color="#0080FF"
									font-size='10'
									:src="user.avaUrl"
									>
								</u-avatar>
							</view >
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		
		<!-- 聊天输入框 -->
		<view class="bottom">
			<view class="input">
				<view class="mic">
					<u-icon name = "mic" size="20" ></u-icon>
				</view>
				<view class="input-msg">
					<uni-easyinput type="text" autoHeight v-model='content' placeholder="请输入内容"  @input="isSend"></uni-easyinput>
				</view>
				<button style="margin-top: 2%; line-height: 60rpx; height: 60rpx;" type="primary" :disabled="isBan"  @click="sendMsg()">发送</button>
			</view>
		</view>
		
	</view>
</template>


<script>
import props from '../../uni_modules/uview-ui/components/u-text/props';

	export default {
		data() {
			return {
				scrollTop:0, //滚动条位置
				isBan:true,
				msgList:[],
				// 自己的个人信息
				user:{},
				// 消息体
				message:{
					id:null,
					toUserID:2,
					fromUserID:1,
					message:'',
				},
				content:'',
				//好友的个人信息
				friend:{},
				school:null,
			}
		},
		onLoad(options){
			this.scrollTop = 550
			// 自己的ID从缓存中取出来
			this.message.toUserID = Number(options.id)
			// console.log(_this.message.toUserID)
			this.user = uni.getStorageSync('user')
			this.school = this.user.schoolName
			this.message.fromUserID = this.user.id
			uni.request({
				url:'http://localhost:8090/nailCampus/user/getUserById/'+this.message.toUserID,
				method:'GET',
				header:{
					"token":uni.getStorageSync('token')
				},
				success:res=> {
					this.friend = res.data.data;
				}
			})
			let token = uni.getStorageSync('token')
			// 获取聊天记录
			uni.request({
				url:'http://localhost:8090/nailCampus/message/getAllChat/'+this.message.toUserID,
				header:{
					"token":token
				},
				success:res=> {
					this.msgList = res.data.data;
				}
			})
			// 进入聊天主页，设置好友所发的消息为已接收状态
			this.acceptMessage()

		},
		onUnload() {
			// 退出聊天主页，设置与该好友的消息为已接收状态
			this.acceptMessage()
			uni.$off('message');
		},
		mounted() {
			
		},
		onShow() {
			let _this = this;
			if(this.user.id!=this.friend.id){
				uni.$on("message",function(res){
					let newMessage = {fromUserID:null, content:'',toUserID:null};
					newMessage.fromUserID = res.message.fromUserID;
					newMessage.toUserID = res.message.toUserID;
					newMessage.content = res.message.content;
					if(res.message.fromUserID === _this.friend.id){
						_this.msgList.push(newMessage);
					}
				})
			}
		},
		methods: {
			isSend(e){
				if(e.length!=0){
					this.isBan = false;
				}else{
					this.isBan = true;
				}
			},
			sendMsg(){
				let newMessage = {fromUserID:null, content:'',toUserID:null};
				newMessage.fromUserID = this.user.id;
				newMessage.toUserID = this.friend.id;
				newMessage.content = this.content;
				this.msgList.push(newMessage);
				this.scrollTop = this.scrollTop + 550
				let _this = this;
				this.content = '';
				uni.request({
					url:"http://localhost:8090/ws/send",
					data:{
						toUserID:this.friend.id,
						content:newMessage.content,
						fromUserID:this.user.id,
					},
					success(res) {
						console.log("发送成功");
					}
				})
			},
			
			friendMessage(msg){
				if(this.user.id===this.friend.id){
					return false
				}
				if(msg.fromUserID === this.friend.id ){
					return true
				}else{
					return false
				}
			},
			meMessage(msg){
				if(msg.fromUserID === this.user.id){
					return true;
				}else{
					return false;
				}
			},
			getAvatar(user){
				let text = '';
				// console.log("这是方法里边的",user);
				if(user.avaUrl == null|| user.avaUrl.length == 0){
					text = user.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
			back() {
				uni.reLaunch({
					url: '/pages/msg/index'
				});
			},
			navTo(url,id){
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			acceptMessage(){
				uni.request({
					url:'http://localhost:8090/nailCampus/message/acceptMessage/'+this.message.toUserID,
					method:'GET',
					header:{
						"token":uni.getStorageSync('token')
					},
					success:res=>{
					},
				})
			}
		}
	}
</script>


<style lang="less" scoped>
	.friend-name{
		width: 100%;
		// border: 1rpx solid ;
		margin-top: 2%;
		margin-left: 35%;
		display: flex;
		flex-direction: column;
		.name{
			width: 100%;
			// border: 1rpx solid red;
			margin-left:20% ;
			font-size: 30rpx;
			font-weight: 600;
		}
		.school{
			margin-left: 10%;
			// border: 1rpx solid ;
			width: 100%;
			margin-top: 2%;
			font-size: 20rpx;
			color: #aaaaaa;
		}
	}
	.center{
		background-color: #EFF3F4;
		.friend-msg{
			display: flex;
			margin-top: 4%;
			.avatar{
				margin-left: 2%;
			}
			.content{
				margin-left: 2%;
				width: 80%;
				height: 100%;
				display: flex;
				text{
					word-break: break-all;
					font-size: 22rpx;
					padding: 2%;
					border-radius: 6px;
					background-color: white;
				}
			}
		}
		.me-msg{
			display: flex;
			justify-content:flex-end;  
			margin-top: 4%;
			.me-avatar{
				justify-content:flex-end;  
				margin-right: 2%;
			}
			.me-content{
				justify-content:flex-end;  
				margin-right: 2%;
				width: 80%;
				height: 100%;
				display: flex;
				text{
					word-break: break-all;
					font-size: 22rpx;
					padding: 2%;
					border-radius: 6px;
					background-color: #C9E8FD;
				}
			}
		}

	}
	.bottom{
		width: 100%;
		height: 120rpx;
		padding-top: 10px;
		top: 570px;
		position: absolute;
		background-color: #EFF3F4;
		.input{
			display: flex;
			margin-left: 3%;
			.mic{
				margin-top: 4%;
				height: 40rpx;
				width: 40rpx;
				border-radius: 50%;
				border: 1rpx solid black;
			}
			.input-msg{
				margin-left: 2%;
				margin-top: 2%;
				width: 70%;
				height: 50rpx;
			}
			.send-msg:active{
				background-color: #006bd0;
			}
		}
	}
	

</style>
